<template>
  <a-card :bordered="false">
    <div class="card-title">{{ $route.meta.title }} - {{typeName}}</div>
    <a-spin :spinning="isLoading">
        <component style="margin-top: 15px;"
                   ref="actionForm"
                   :id='actionId'
                   :is="tpl"/>
          <a-button type="primary" @click='handleSubmit' :loading="isBtnLoading">提交</a-button>
          <a-button style='margin-left:15px;' @click='goBack' :loading="isBtnLoading">返回</a-button>

    </a-spin>
  </a-card>
</template>

<script>
import * as Api from '@/api/book/page'
/** @var {BookActionType} BookActionType */
import BookActionType from '@/common/enum/bookActionType'

const tplList = [
  'dictionary',
  'audio',
  'video',
  'imageNode',
  'imageNodeLocal'
]
export default {
  name: 'actionForm',
  data(){
    return {
      type: 0,
      bookId:0,
      // 标签布局属性
      labelCol: { span: 3 },
      // 输入框布局属性
      wrapperCol: { span: 10 },
      tpl:null,
      typeName:'',
      // loading状态
      isLoading: false,
      isBtnLoading: false,
      // 当前表单元素
      form: this.$form.createForm(this),
      bookName:'',
      actionId:''
    }
  },
  created () {
    this.bookId = this.$route.query.bookId
    this.bookName = this.$route.query.bookName
    this.type = parseInt( this.$route.query.type)
    this.pageId = this.$route.query.pageId
    let pass = true;
    if(!this.pageId){
      pass = this.loadTpl(this.type)
    }
    if(!this.bookId || !pass){
      this.$message.error('参数错误', 1.5)
      this.goBack()
    }else{
      setTimeout(()=>{
        Api.batchList({type:this.type,bookId:this.bookId}).then(res=>{
          this.$refs.actionForm.setFormData(res.data,this.pageId)
        })
      },300)
    }
  },
  methods:{
    loadTpl(type) {
      if (!tplList[type]) {
        return false
      } else {
        this.typeName = BookActionType.getNameByValue(type)
        this.tpl = ()=> import('@/views/book/actions/' + tplList[type])
        return true;
      }
    },
    goBack(){
      this.$router.push({ path: '/book/page', query: { bookId: this.bookId,bookName:this.bookName } })
    },
    /**
     * 确认按钮
     */
    handleSubmit (e) {
      e.preventDefault()
      this.$refs.actionForm.getFormData().then(data=>{
        data.bookId = this.bookId
        data.actionType = this.type
        this.isLoading=true
        Api.batchAdd(data).then(res=>{
          this.$message.success('保存成功')
          this.$router.push({ path: '/book/page', query: { bookId: this.bookId,bookName:this.bookName } })
        }).finally(()=>{
          this.isLoading=false
        })
      })
    },
  }
}
</script>

<style scoped>

</style>